@import './base/index';

#icon-loading {
  width: 42px;
  height: 42px;
  animation: loading-rotate 2s linear infinite;

  .path {
    animation: loading-dash 1.5s ease-in-out infinite;

    // stroke: #27e164;
    stroke: inherit;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke-linecap: round;
  }
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}

.icon-wrap {
  $size: 20;

  position: relative;
  top: -1px;
  display: inline-block;

  // overflow: hidden;
  margin: 5px;
  vertical-align: middle;
  background: white;
  border-radius: 50%;

  @include square($size - 4);

  .icon {
    @include centerByPosition;
    @include square($size);
  }
}

.icon-success {
  fill: #40c135;
}

.icon-warn {
  fill: #497ef1;
}

.icon-error {
  fill: #db2069;
}
